<template>
  <view class="my" >
    <view class="card" >
      <view class="ava" >
        <image class="img" mode="aspectFill" :src="userinfo.avatarUrl || logoBig" alt=""  @click="loginOrSetInfo" />
        <view class="properties" >身强</view>
      </view>
      <view class="userinfo" @click="loginOrSetInfo" >
        <view class="userinfo-item" >
          <view class="name" >{{nameComputed?.text}}</view>
        </view>
        <view  class="update-info" > 
      </view>
      </view>

      <!-- 编辑信息 -->
      <view class="diary-info" >
        <view class="diary-count" >
          <view class="count" >{{statistics.count || 0}}</view>
          <view class="count-desc" >日记篇数</view>
        </view>
        <view class="line" ></view>
        <view class="jzzm" >
          <view class="count" >{{statistics.JiaziCycle || 0}}</view>
          <view class="count-desc" >甲子周目</view>
        </view>
      </view>

      <!-- 功能卡片 -->
      <view class="setting" >
        <view class="setting-item" v-for="(item, index) in infoList" :key="index" @click="chooseItem(item)" >
          <view class="setting-item-title" >{{item.name}}</view>
          <view class="setting-item-desc" >
            <nut-icon name="right" size="16px" ></nut-icon>
          </view>
        </view>
      </view>

      <!-- <view class="empty-diary" v-if="diaryList.length === 0" >
        <view>Σ(⊙▽⊙"a</view>
        <view>还没有写日记哦～</view>
      </view>
       <view class="diary-list" >
        <view class="diary-item"  v-for="(item, index) in diaryList" :key="index">
          <view class="date" >
            <view><text class="month">{{item.day}}</text>/<text class="day">{{item.month}}</text></view>
            <view class="jiazi" >{{item.jiazi}}</view>
          </view>
          <view class="diary-conten-list" >
            <view class="diary-content-item" v-for="(diary, index) in item.items" :key="index" >
            <view class="header" >
              <view class="week" > {{item.week}} </view>
              <view class="tgzr" @click="pushTgzrPage(item)" > 同干支日》 </view>
            </view>
            <view class="content" >
              {{diary.content}}
            </view>
            <view class="line" ></view>
            <view class="footer" >
              <view class="date" >发布于 {{diary.time}}</view>
              <view class="diary-opra" >
                <view class="comment" >
                  <image class="icon" mode="aspectFill" src="/static/common/message.png"  />
                  <view class="count" >{{diary.allLikeCount}}</view>
                </view>
                <view class="like" >
                  <image class="icon" mode="aspectFill" src="/static/common/unlike.png"  />
                  <view  class="count" > {{diary.allLikeCount}} </view>
                </view>
              </view>
            </view>
            </view>
          </view>
        </view>
       </view> -->
    </view>
  </view>
</template>
<script lang='ts'  setup >
import { DiaryController, MyController } from '@/controller';
import logoBig from '@/static/common/ava-my.png';
import { useUserStore } from '@/store';
import { onLoad, onShow  } from '@dcloudio/uni-app';
import dayjs from 'dayjs';
import { storeToRefs } from 'pinia';
import { computed, ref } from 'vue';
import { useRouterStore } from '@/store'

const userStore = useUserStore()

const { token, userinfo } = storeToRefs(userStore)

const visible = ref()

const infoList = [
  { name: '修改资料', key: 0, path: '/pages/my/setting'},
  { name: '我的日记', key: 1, path: ''}
]


const properties = ref([
  {title: '身强', color: '#58BCEA', value: '身强'},
  {title: '从强', color: '#FFB200', value: '从强'},
  {title: '中和', color: '#FA5A5A', value: '中和'},
  {title: '身弱', color: '#8A70C7', value: '身弱'},
  {title: '从弱', color: '#56D6AC', value: '从弱'},
])  

 const queryParams = ref({
    page: 1 
 })

 const statistics = ref({
  count: 0,
  JiaziCycle: 0
 })

 const nameComputed = computed(() => {
  if (!token.value) return {
    text: '点击登录',
    url: '/pages/login/login'
  }
  else if (token.value && !userinfo.value.nickname) return {
    text: '点击设置信息',
    url: '/pages/setting/setting'
  }
  else if (token.value && userinfo.value.nickname) {
    return {
      text: userinfo.value.nickname,
      url: userinfo.value.avatarUrl
    }
  }
 })

 const diaryList = ref<{date: string, items: API.DIARY[]}[]>([])

 const pushTgzrPage = (record: any) => {
  uni.navigateTo({
    url: '/pages/tgzr/index?time=' + record.time,
  })
 }

 const chooseItem = (record: any) => {
  console.log('record:', record);
  uni.navigateTo({
    url: record.path
  })
  // if (record)
 }

 const loginOrSetInfo = async () => {
  if (!token.value) {
    uni.navigateTo({ url: '/pages/login/login' }) 
  } else if (token.value && !userinfo.value.nickname) {
    uni.navigateTo({ url: '/pages/my/setting' }) 
  }
 }

 const getDiaryPage = async () => {
   const { records } = await DiaryController.getMyDiaryPage(queryParams.value.page)
   console.log("data:", records)
   
   const groupedRecords = records.reduce((acc, curr) => {
     const date = curr.time.split(' ')[0] 
     if (!acc[date]) {
       acc[date] = []
     }
     acc[date].push(curr)
     return acc
   }, {})
   
 
   diaryList.value = Object.entries(groupedRecords).map(([date, items]) => ({ 
    month: dayjs(date).format('MM'), 
    day: dayjs(date).format('DD'),
    items,
    week: dayjs(date).format('dddd'),
    jiazi: items[0].jiazi
   }))
   console.log('diaryList.value:', diaryList.value);
 }

 const getStatistics = async () => {
  const data = await MyController.diaryStatistics()
  console.log('data:', data);
  
  statistics.value = data
 }

 onLoad(() => {
  
  if (token.value) {
    getDiaryPage()
    getStatistics()
  }
 })

  onShow(() => {
    useRouterStore().setRoutes(['/pages/dailySignature/index'])
  })
</script>
<style lang='scss' scoped >
@import '../../styles/index.scss';

.my {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to bottom right, rgb(245, 252, 250), rgb(252, 235, 249));
  display: flex;
  padding-top: 128rpx;
  box-sizing: border-box;
  .card {
    width: 100vw;
    padding-top: 128rpx;
    // position: relative;
    .ava {
      position: relative;
      width: 186rpx;
      height: 186rpx;
      border-radius: 50%;
      margin: 0 auto;
      margin-top: -93rpx;
      .img {
        width: 186rpx;
        height: 186rpx;
        border-radius: 50%;
        display: block;
      }
      .properties {
        width: 66rpx;
        height: 66rpx;
        border-radius: 50%;
        position: absolute;
        right: 0rpx;
        bottom: 0rpx;
        background-color: #85d9df;
        font-size: 22rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        letter-spacing: 6rpx;
        border: 2rpx solid #fff;
      }
    }
    .userinfo {
      display: flex;
      // flex-direction: column;
      justify-content: center;
      align-items: flex-end;
      margin-top: 48rpx;
      .userinfo-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .name { 
        // color: ;
      }
      .property {
        display: flex;
        align-items: center;
        justify-content: center;
        .property-text {
          display: flex;
          margin-right: 12rpx;
          color: gold;
        }
        .icon {
          width: 18rpx;
          height: 24rpx;
          // margin-right: 48rpx;
        }
      }
    }
    .update-info {
      margin-left: 12rpx;
    }

    .setting {
      width: 680rpx;
      background-color: #fff;
      margin: 0 auto;
      margin-top: 96rpx;
      border-radius: 18rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .setting-item {
        width: 94%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 86rpx;
        border-bottom: 1rpx solid #e9e6e6;
        box-sizing: border-box;
        .setting-item-title {

        }
        .setting-item-desc {
          margin-top: 6rpx;
        }
      }
      .setting-item:last-child {
        border: none;
      }
    }
    .diary-info {
      width: 580rpx;
      background-color: #fff;
      border-radius: 18rpx;
      margin: 0 auto;
      margin-top: 96rpx;
      padding: 24rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      .diary-count {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .line {
        width: 2rpx;
        height: 96rpx;
        background-color: $text-grey;
        margin: 0 48rpx;
      }
      .jzzm {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .count {
        margin-bottom: 24rpx;
        font-weight: 600;
      }
      .count-desc {
        color: $text-grey;
      }
    }
    .empty-diary {
      width: 680rpx;
      height: 480rpx;
      background-color: #fff;
      margin: 0 auto;
      margin-top: 72rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: $text-color;
      border-radius: 48rpx;
    }
    .diary-list {
      width: 100%;
      padding: 0 24rpx;
      margin-top: 48rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      // align-items: ;
      .diary-item {
        display: flex;
        justify-content: space-between;
        .date {
          .month {
            font-weight: 600;
            font-size: 48rpx;
          }
          .day {
          }
          .jiazi {
            font-size: 26rpx;
            color: #5dd756;
          }
        }
        .diary-conten-list {
          display: flex;
          flex-direction: column;
          .diary-content-item {
            width: 580rpx;
            height: 480rpx;
            background-color: #fff;
            border-radius: 24rpx;
            padding: 24rpx;
            box-sizing: border-box;
            margin-bottom: 24rpx;
          .header {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .week {
              font-size: 26rpx;
              color: $text-grey;
            }
            .tgzr {
              font-size: 26rpx;
              color: $text-grey;
            }
          }
          .content {
            margin-top: 24rpx;
            height: 270rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 7;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 30rpx;
            color: $article-color;
          }
          .line {
            width: 380rpx;
            height: 2rpx;
            background-color: #ccc;
            margin: 0 auto;
            margin-top: 24rpx;
          }
          .emojis {}
          .footer {
            width: 100%;
            height: 48rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 24rpx;
            .date {
              font-size: 26rpx;
              color: $text-grey;
            }
            .diary-opra {
              display: flex;
              align-items: center;
              .comment {
                display: flex;
                align-items: center;
                margin-right: 24rpx;
              }
              .like {
                display: flex;
                align-items: center;
              }
              .icon {
                width: 32rpx;
                height: 32rpx;
                display: block;
                margin-right: 6rpx;
              }
              .count {
                color: $text-grey;
              }
            }
          }
          }
        }
       
      }
    }
  }
}

</style>